<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>教师课程收益管理系统</title>
  <!-- Tailwind CSS v3 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
            dark: '#1D2129',
            'dark-2': '#4E5969',
            'light-1': '#F2F3F5',
            'light-2': '#E5E6EB',
            'light-3': '#C9CDD4'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(22, 93, 255, 0.12);
      }
      .progress-bar {
        height: 6px;
        border-radius: 3px;
        overflow: hidden;
        background-color: #E5E6EB;
      }
      .progress-value {
        height: 100%;
        border-radius: 3px;
        transition: width 1s ease;
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0 flex items-center">
          <i class="fa fa-graduation-cap text-primary text-2xl mr-2"></i>
          <span class="text-xl font-bold text-primary">EduPro</span>
        </div>
        <nav class="hidden md:ml-10 md:flex space-x-8">
          <a href="#" class="text-dark-2 hover:text-primary px-3 py-2 text-sm font-medium border-b-2 border-primary">收益管理</a>
          <a href="javascript:history.back()" class="text-dark-2 hover:text-primary px-3 py-2 text-sm font-medium">返回</a>

        </nav>
      </div>
      <div class="flex items-center">
        <button class="p-2 rounded-full text-dark-2 hover:bg-gray-100 focus:outline-none">
          <i class="fa fa-bell-o"></i>
        </button>
        <div class="ml-3 relative">
          <div class="flex items-center">
            <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/64/200/200" alt="教师头像">
            <span class="ml-2 text-sm font-medium text-dark-2 hidden md:block">张教授</span>
            <i class="fa fa-angle-down ml-1 text-dark-2 hidden md:block"></i>
          </div>
        </div>
        <button class="ml-4 md:hidden p-2 rounded-md text-dark-2 hover:bg-gray-100 focus:outline-none">
          <i class="fa fa-bars"></i>
        </button>
      </div>
    </div>
  </div>
</header>

<main class="container mx-auto px-4 py-8">
  <!-- 页面标题 -->
  <div class="mb-8">
    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">收益管理中心</h1>
    <p class="text-dark-2 mt-2">查看您的课程销售情况和收益统计</p>
  </div>

  <!-- 收益概览卡片 -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- 总收益卡片 -->
    <div class="bg-white rounded-xl p-6 card-shadow card-hover">
      <div class="flex items-start justify-between">
        <div>
          <p class="text-dark-2 text-sm font-medium">个人总收益</p>
          <h3 class="text-3xl font-bold text-dark mt-2 mb-1">¥128,640</h3>
          <p class="text-success text-sm flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 12.5% <span class="text-dark-2 ml-1">vs 上月</span>
          </p>
        </div>
        <div class="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
          <i class="fa fa-usd text-primary text-xl"></i>
        </div>
      </div>
      <div class="mt-4">
        <div class="progress-bar">
          <div class="progress-value bg-primary" style="width: 78%"></div>
        </div>
        <p class="text-xs text-dark-2 mt-2">本月目标完成率: 78%</p>
      </div>
    </div>

    <!-- 课程销售卡片 -->
    <div class="bg-white rounded-xl p-6 card-shadow card-hover">
      <div class="flex items-start justify-between">
        <div>
          <p class="text-dark-2 text-sm font-medium">课程销售数量</p>
          <h3 class="text-3xl font-bold text-dark mt-2 mb-1">2,456</h3>
          <p class="text-success text-sm flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 8.2% <span class="text-dark-2 ml-1">vs 上月</span>
          </p>
        </div>
        <div class="h-12 w-12 rounded-full bg-secondary/10 flex items-center justify-center">
          <i class="fa fa-shopping-cart text-secondary text-xl"></i>
        </div>
      </div>
      <div class="mt-4">
        <div class="progress-bar">
          <div class="progress-value bg-secondary" style="width: 65%"></div>
        </div>
        <p class="text-xs text-dark-2 mt-2">年度目标完成率: 65%</p>
      </div>
    </div>

    <!-- 活跃课程卡片 -->
    <div class="bg-white rounded-xl p-6 card-shadow card-hover">
      <div class="flex items-start justify-between">
        <div>
          <p class="text-dark-2 text-sm font-medium">活跃课程数</p>
          <h3 class="text-3xl font-bold text-dark mt-2 mb-1">12</h3>
          <p class="text-success text-sm flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 3 <span class="text-dark-2 ml-1">vs 上月</span>
          </p>
        </div>
        <div class="h-12 w-12 rounded-full bg-warning/10 flex items-center justify-center">
          <i class="fa fa-book text-warning text-xl"></i>
        </div>
      </div>
      <div class="mt-4">
        <div class="progress-bar">
          <div class="progress-value bg-warning" style="width: 80%"></div>
        </div>
        <p class="text-xs text-dark-2 mt-2">季度目标完成率: 80%</p>
      </div>
    </div>

    <!-- 平均销售额卡片 -->
    <div class="bg-white rounded-xl p-6 card-shadow card-hover">
      <div class="flex items-start justify-between">
        <div>
          <p class="text-dark-2 text-sm font-medium">平均课程销售额</p>
          <h3 class="text-3xl font-bold text-dark mt-2 mb-1">¥10,720</h3>
          <p class="text-danger text-sm flex items-center">
            <i class="fa fa-arrow-down mr-1"></i> 3.1% <span class="text-dark-2 ml-1">vs 上月</span>
          </p>
        </div>
        <div class="h-12 w-12 rounded-full bg-success/10 flex items-center justify-center">
          <i class="fa fa-line-chart text-success text-xl"></i>
        </div>
      </div>
      <div class="mt-4">
        <div class="progress-bar">
          <div class="progress-value bg-success" style="width: 92%"></div>
        </div>
        <p class="text-xs text-dark-2 mt-2">行业平均: ¥9,350</p>
      </div>
    </div>
  </div>

  <!-- 图表区域 -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- 收益趋势图 -->
    <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-lg font-semibold text-dark">收益趋势分析</h2>
        <div class="flex space-x-2">
          <button class="px-3 py-1 text-xs bg-primary text-white rounded-full">月度</button>
          <button class="px-3 py-1 text-xs bg-gray-100 text-dark-2 rounded-full hover:bg-gray-200">季度</button>
          <button class="px-3 py-1 text-xs bg-gray-100 text-dark-2 rounded-full hover:bg-gray-200">年度</button>
        </div>
      </div>
      <div class="h-80">
        <canvas id="revenueTrendChart"></canvas>
      </div>
    </div>

    <!-- 收益来源分布 -->
    <div class="bg-white rounded-xl p-6 card-shadow">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-lg font-semibold text-dark">收益来源分布</h2>
        <button class="text-primary hover:text-primary/80 text-sm">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
      <div class="h-64">
        <canvas id="revenueSourcesChart"></canvas>
      </div>
      <div class="grid grid-cols-2 gap-4 mt-6">
        <div class="flex items-center">
          <div class="h-3 w-3 rounded-full bg-primary mr-2"></div>
          <span class="text-sm text-dark-2">编程课程</span>
        </div>
        <div class="flex items-center">
          <div class="h-3 w-3 rounded-full bg-secondary mr-2"></div>
          <span class="text-sm text-dark-2">设计课程</span>
        </div>
        <div class="flex items-center">
          <div class="h-3 w-3 rounded-full bg-warning mr-2"></div>
          <span class="text-sm text-dark-2">营销课程</span>
        </div>
        <div class="flex items-center">
          <div class="h-3 w-3 rounded-full bg-success mr-2"></div>
          <span class="text-sm text-dark-2">其他课程</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 课程收益明细表格 -->
  <div class="bg-white rounded-xl p-6 card-shadow mb-8">
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-lg font-semibold text-dark">课程收益明细</h2>
      <div class="flex items-center">
        <div class="relative mr-4">
          <input type="text" placeholder="搜索课程..." class="pl-9 pr-4 py-2 text-sm border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
          <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-2"></i>
        </div>
        <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 flex items-center text-sm">
          <i class="fa fa-download mr-2"></i> 导出报表
        </button>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-light-2">
        <thead>
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">课程名称</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">分类</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">售价</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">销量</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">收益</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">状态</th>
          <th class="px-6 py-3 text-right text-xs font-medium text-dark-2 uppercase tracking-wider">操作</th>
        </tr>
        </thead>
        <tbody class="bg-white divide-y divide-light-2">
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded object-cover mr-4" src="https://picsum.photos/id/0/200/200" alt="Python编程基础">
              <div>
                <div class="text-sm font-medium text-dark">Python编程基础</div>
                <div class="text-xs text-dark-2">创建于 2025-01-15</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">编程开发</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥199.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">854</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-success">¥169,946.00</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">活跃</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-primary hover:text-primary/80 mr-4">详情</a>
            <a href="#" class="text-dark-2 hover:text-dark">编辑</a>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded object-cover mr-4" src="https://picsum.photos/id/180/200/200" alt="UI/UX设计实战">
              <div>
                <div class="text-sm font-medium text-dark">UI/UX设计实战</div>
                <div class="text-xs text-dark-2">创建于 2025-02-20</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">设计创意</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥299.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">642</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-success">¥191,958.00</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">活跃</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-primary hover:text-primary/80 mr-4">详情</a>
            <a href="#" class="text-dark-2 hover:text-dark">编辑</a>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded object-cover mr-4" src="https://picsum.photos/id/160/200/200" alt="数字营销策略">
              <div>
                <div class="text-sm font-medium text-dark">数字营销策略</div>
                <div class="text-xs text-dark-2">创建于 2025-03-10</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-orange-100 text-orange-800">市场营销</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥159.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">428</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-success">¥68,052.00</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">活跃</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-primary hover:text-primary/80 mr-4">详情</a>
            <a href="#" class="text-dark-2 hover:text-dark">编辑</a>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded object-cover mr-4" src="https://picsum.photos/id/119/200/200" alt="Web前端开发进阶">
              <div>
                <div class="text-sm font-medium text-dark">Web前端开发进阶</div>
                <div class="text-xs text-dark-2">创建于 2025-04-05</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">编程开发</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥349.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">512</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-success">¥178,688.00</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">活跃</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-primary hover:text-primary/80 mr-4">详情</a>
            <a href="#" class="text-dark-2 hover:text-dark">编辑</a>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded object-cover mr-4" src="https://picsum.photos/id/1/200/200" alt="数据分析与可视化">
              <div>
                <div class="text-sm font-medium text-dark">数据分析与可视化</div>
                <div class="text-xs text-dark-2">创建于 2025-05-18</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800">数据科学</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥249.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">387</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-success">¥96,363.00</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">审核中</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-primary hover:text-primary/80 mr-4">详情</a>
            <a href="#" class="text-dark-2 hover:text-dark">编辑</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="flex items-center justify-between px-4 py-3 sm:px-6 mt-4">
      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
          <p class="text-sm text-dark-2">
            显示第 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">12</span> 条记录
          </p>
        </div>
        <div>
          <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-light-2 bg-white text-sm font-medium text-dark-2 hover:bg-gray-50">
              <span class="sr-only">上一页</span>
              <i class="fa fa-chevron-left text-xs"></i>
            </a>
            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-light-2 bg-primary text-sm font-medium text-white">
              1
            </a>
            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-light-2 bg-white text-sm font-medium text-dark-2 hover:bg-gray-50">
              2
            </a>
            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-light-2 bg-white text-sm font-medium text-dark-2 hover:bg-gray-50">
              3
            </a>
            <span class="relative inline-flex items-center px-4 py-2 border border-light-2 bg-white text-sm font-medium text-dark-2">
                                ...
                            </span>
            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-light-2 bg-white text-sm font-medium text-dark-2 hover:bg-gray-50">
              12
            </a>
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-light-2 bg-white text-sm font-medium text-dark-2 hover:bg-gray-50">
              <span class="sr-only">下一页</span>
              <i class="fa fa-chevron-right text-xs"></i>
            </a>
          </nav>
        </div>
      </div>
    </div>
  </div>

  <!-- 提现信息 -->
  <div class="bg-white rounded-xl p-6 card-shadow">
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-lg font-semibold text-dark">最近提现记录</h2>
      <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 flex items-center text-sm">
        <i class="fa fa-plus mr-2"></i> 申请提现
      </button>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-light-2">
        <thead>
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">申请日期</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">提现金额</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">手续费</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">到账金额</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">提现方式</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">状态</th>
          <th class="px-6 py-3 text-right text-xs font-medium text-dark-2 uppercase tracking-wider">操作</th>
        </tr>
        </thead>
        <tbody class="bg-white divide-y divide-light-2">
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">2025-06-28</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥15,000.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥150.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-success">¥14,850.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">支付宝</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-primary hover:text-primary/80">详情</a>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">2025-06-15</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥10,000.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥100.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-success">¥9,900.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">支付宝</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-primary hover:text-primary/80">详情</a>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">2025-05-30</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥8,500.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">¥85.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-success">¥8,415.00</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">支付宝</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-primary hover:text-primary/80">详情</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</main>

<footer class="bg-white border-t border-light-2 mt-12">
  <div class="container mx-auto px-4 py-8">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="flex items-center mb-4 md:mb-0">
        <i class="fa fa-graduation-cap text-primary text-xl mr-2"></i>
        <span class="text-lg font-bold text-primary">EduPro</span>
        <p class="text-dark-2 text-sm ml-4">教师收益管理系统</p>
      </div>
      <div class="flex space-x-6">
        <a href="#" class="text-dark-2 hover:text-primary">
          <i class="fa fa-question-circle mr-1"></i> 帮助中心
        </a>
        <a href="#" class="text-dark-2 hover:text-primary">
          <i class="fa fa-file-text-o mr-1"></i> 服务条款
        </a>
        <a href="#" class="text-dark-2 hover:text-primary">
          <i class="fa fa-shield mr-1"></i> 隐私政策
        </a>
      </div>
    </div>
    <div class="border-t border-light-2 mt-6 pt-6 text-center text-dark-2 text-sm">
      <p>© 2025 EduPro 教师平台. 保留所有权利.</p>
    </div>
  </div>
</footer>

<!-- JavaScript -->
<script>
  // 收益趋势图表
  const revenueTrendCtx = document.getElementById('revenueTrendChart').getContext('2d');
  const revenueTrendChart = new Chart(revenueTrendCtx, {
    type: 'line',
    data: {
      labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      datasets: [
        {
          label: '课程收益',
          data: [8500, 12500, 11000, 14500, 16000, 18000, 17500, 19000, 21000, 22500, 24000, 25000],
          borderColor: '#165DFF',
          backgroundColor: 'rgba(22, 93, 255, 0.1)',
          fill: true,
          tension: 0.4,
          borderWidth: 2,
          pointBackgroundColor: '#FFFFFF',
          pointBorderColor: '#165DFF',
          pointBorderWidth: 2,
          pointRadius: 4,
          pointHoverRadius: 6
        },
        {
          label: '平均收益',
          data: [10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000],
          borderColor: '#00B42A',
          borderWidth: 2,
          borderDash: [5, 5],
          pointRadius: 0,
          tension: 0.4
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'top',
          labels: {
            usePointStyle: true,
            boxWidth: 6,
            font: {
              family: 'Inter',
              size: 12
            }
          }
        },
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          padding: 10,
          cornerRadius: 8,
          titleFont: {
            family: 'Inter',
            size: 14,
            weight: 'bold'
          },
          bodyFont: {
            family: 'Inter',
            size: 13
          },
          displayColors: false,
          callbacks: {
            label: function(context) {
              return context.dataset.label + ': ¥' + context.parsed.y.toLocaleString();
            }
          }
        }
      },
      scales: {
        x: {
          grid: {
            display: false
          },
          ticks: {
            font: {
              family: 'Inter',
              size: 12
            }
          }
        },
        y: {
          beginAtZero: true,
          grid: {
            borderDash: [2, 2]
          },
          ticks: {
            callback: function(value) {
              return '¥' + value.toLocaleString();
            },
            font: {
              family: 'Inter',
              size: 12
            }
          }
        }
      },
      interaction: {
        intersect: false,
        mode: 'index'
      },
      animation: {
        duration: 2000,
        easing: 'easeOutQuart'
      }
    }
  });

  // 收益来源分布图表
  const revenueSourcesCtx = document.getElementById('revenueSourcesChart').getContext('2d');
  const revenueSourcesChart = new Chart(revenueSourcesCtx, {
    type: 'doughnut',
    data: {
      labels: ['编程课程', '设计课程', '营销课程', '其他课程'],
      datasets: [{
        data: [45, 30, 15, 10],
        backgroundColor: [
          '#165DFF',
          '#0FC6C2',
          '#FF7D00',
          '#00B42A'
        ],
        borderWidth: 0,
        hoverOffset: 5
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      cutout: '70%',
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          padding: 10,
          cornerRadius: 8,
          titleFont: {
            family: 'Inter',
            size: 14,
            weight: 'bold'
          },
          bodyFont: {
            family: 'Inter',
            size: 13
          },
          callbacks: {
            label: function(context) {
              return context.label + ': ' + context.parsed + '%';
            }
          }
        }
      },
      animation: {
        animateRotate: true,
        animateScale: true,
        duration: 2000,
        easing: 'easeOutQuart'
      }
    }
  });

  // 进度条动画
  document.addEventListener('DOMContentLoaded', function() {
    const progressBars = document.querySelectorAll('.progress-value');
    progressBars.forEach(bar => {
      const width = bar.style.width;
      bar.style.width = '0';
      setTimeout(() => {
        bar.style.width = width;
      }, 300);
    });
  });
</script>
</body>
</html>